<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<script src="test.js" type="text/javascript"></script>
	<style type="text/css" media="screen">
		/*合法样式*/
		input.ng-valid{
			color: white;
			background-color: lightgreen;
		}  
		input.ng-empty{
			background-color: coral;
		}
	</style>
</head>
<body ng-app='myApp' ng-init="initData='duck';num=1;email='testrunoob.com'">
	<div ng-controller="myCtrl">
		<h1>ng-model（无法绑定设置在$rootScope上的属性）</h1>
		<p>数量 : <input type="number" ng-model="num" min="1"></p>
		<p>价格 : <input type="number" ng-model="price"></p>
	  	<h1>合计：{{(num*price)|currency}}</h1>
	  	<h2 ng-bind="'hola,'+initData"></h2>
	  	<h1>ng-init</h1>
	  	<p>初始值:{{initData}}</p>
	  	<p>name:{{firstname +' '+lastname}}</p>
	  	<h1>ng-repeat循环<mark>(在循环中加上track by $index 可以遍历含重复值得数组)</mark></h1> 
		<ul class="menu">
			<li class="item" ng-repeat="(index,val) in points track by $index">{{index}}-{{data.text}},{{val}} <a ng-click="remove(index)">×</a></li> 
		</ul>
		<h1>自定义指令(命名camel)</h1>
		<my-directive></my-directive>
		<div my-directive-by-a></div>
		<div class="my-dirt-by-c"></div>
		<!-- directive: my-dirt-by-m -->

		<h1>ng验证</h1>
		<form name="myForm"> 
			邮箱： <input type="email" name="myAddress" ng-model="email">
			<span ng-show="myForm.myAddress.$error.email">邮箱地址不合法</span> 
			<p>
				验证成功？{{myForm.myAddress.$valid}}
			    值被改变？{{myForm.myAddress.$dirty}}
			    点击过？{{myForm.myAddress.$touched}}
			</p>
			<h1>ng-valid指定表单验证合法样式</h1>
			<input type="text" name="myText" ng-model="test" required>
			<pre>ng-model 指令根据表单域的状态添加/移除以下类：
	ng-empty
	ng-not-empty
	ng-touched
	ng-untouched
	<a href="http://www.runoob.com/angularjs/angularjs-model.html">ng-valid</a>
	ng-invalid
	ng-dirty
	ng-pending
	ng-pristine</pre>
			<input type="text" name="myText" ng-model="test">
		</form>

		<h1>作用域$scope,$rootScope</h1>
		<button type="button" ng-click="commonFun('fk u')">$rootScope.fun</button>
		<button type="button" ng-click="selfFun('mimimi')">$scope.fun</button>
		<button type="" ng-click="self1Fun()">访问后面Ctrl定义的$rootScope//正常访问</button>
	</div>
	<div ng-controller="myCtrl1">
		<h1>controller 1</h1>
		<p ng-repeat="(key,val) in ctrl1Data">{{key +':'+ val}}</p>
		<button type="button" ng-click="commonFun('fk u')">$rootScope.fun</button>
		<p>直接访问$rootScope定义的属性sky：{{sky}}</p>
		<p>通过在其他控制器访问$rootScope的sky属性并给当前控制器属性commonData赋值来访问：{{commonData}}</p>
		<button type="button" ng-click="self2Fun()">访问前面Ctrl定义的$rootScope//正常访问</button>

		<h1>对$rootScope的数据进行增、删 [rootpoints]</h1>
		<button type="button" ng-click="readRootScopeData()">访问绑定rootscope的值</button>
		<ul class="menu">
			<li ng-repeat="(index,val) in rootpoints track by $index">point{{index}} => {{val}} <a ng-click="remove(index)">×</a></li> 
			<li><input type="text" ng-model="pointitem"><a ng-click="add()">root-add</a></li> 
		</ul>
		<h1>过滤器</h1>
		<p>before:{{color}}</p>
		<p>after:{{color|uppercase}}</p>


		<h1>服务</h1>
		

	</div>
</body>
</html>